<template>
	<div>
		<el-card class="!border-none" shadow="never">
		    <el-alert type="warning" title="163邮箱：地址->smtp.163.com，端口号->465，认证方式->ssl，编码方式->UTF-8，发件人昵称->自定义，SMTP 登录账号->你的邮箱，SMTP 登录密码->smtp密码" :closable="false" show-icon />
			<el-alert type="warning" title="outlook邮箱：地址->smtp-mail.outlook.com，端口号->587，认证方式->TLS，编码方式->UTF-8，发件人昵称->自定义，SMTP 登录账号->你的邮箱，SMTP 登录密码->邮箱密码" :closable="false" show-icon />
			<el-alert type="warning" title="gmail邮箱：地址->smtp.gmail.com，端口号->465，认证方式->ssl，编码方式->UTF-8，发件人昵称->自定义，SMTP 登录账号->你的邮箱，SMTP 登录密码->专用密码" :closable="false" show-icon />
			<el-alert type="warning" title="（谷歌邮箱，需开启POP、IMAP，两步验证，设置专用密码，SMTP密码为专用密码），具体自行网上搜索" :closable="false" show-icon />
		</el-card>
		<el-card shadow="never" class="!border-none">
			<el-form ref="formRef" class="ls-form" label-position="top">
			<el-form-item label="地址" prop="host">
				<div class="w-80">
					<el-input v-model.trim="emailData.host" placeholder="请输入地址"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="端口号" prop="port">
				<div class="w-80">
					<el-input v-model.trim="emailData.port" placeholder="请输入端口号"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="登录认证方式" prop="smtp">
				<div class="w-80">
					<el-input v-model.trim="emailData.smtp" placeholder="请输入登录认证方式"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="编码方式" prop="charset">
				<div class="w-80">
					<el-input v-model.trim="emailData.charset" placeholder="请输入编码方式"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="发件人昵称" prop="nickname">
				<div class="w-80">
					<el-input v-model.trim="emailData.nickname" placeholder="请输入发件人昵称"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="SMTP 登录账号" prop="username">
				<div class="w-80">
					<el-input v-model.trim="emailData.username" placeholder="请输入SMTP 登录账号"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="SMTP 登录密码" prop="password">
				<div class="w-80">
					<el-input v-model.trim="emailData.password" placeholder="请输入SMTP 登录密码"></el-input>
				</div>
			</el-form-item>
			</el-form>
		</el-card>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'

	const name = ref('email')

	// 表单数据
	const emailData = reactive({
		host: "",
		port: "",
		smtp: "",
		charset: "",
		nickname: "",
		username: "",
		password: "",
	})
	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: emailData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in emailData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					emailData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>